feat(extension): ツールバーアイコンクリックで現在のGitHubリポジトリをPera1展開 by kazuph · Pull Request #3 · kazuph/github-pera1-workers

kazuph · 2026-06-12T05:29:06Z

WHY

「chromeの拡張を押した瞬間に、githubのURLをpera1のパラメーターにして展開したやつを表示してほしい」という依頼に対応。既存の拡張は content script のページ内ボタンのみで、ツールバーアイコンのクリックでは何も起きなかった。
さらに既存ボタンのリンク先 pera1.pages.dev は DNS解決すらできない死にホストで、実質機能していなかった。

HOW

Manifest V3 の action + service worker（background.js）で chrome.action.onClicked を購読し、現在タブのURLを変換して chrome.tabs.create で開く。権限は activeTab のみ（クリック時だけURLを読める最小権限）。
変換ロジックは extension/pera1-url.js に分離し、service worker とテストで同一実装を共有。
- repoルート / tree / blob はそのまま、raw→blob、Issues/PR等の非コードページはrepoルートにフォールバック、#L10 やクエリは除去、GitHub以外はバッジ「!」表示のみ。
デプロイ先は Cloudflare API で workers.dev サブドメインを実測確認し pera1.kazu-san.workers.dev に統一（curlで200確認済み）。
レビュー指摘「この位置のボタン微妙。」を受け、ページ内ボタンの挿入先を ul.pagehead-actions（Watch/Fork/Starの並び）に変更。

WHAT

extension/background.js / extension/pera1-url.js: 新規
extension/manifest.json: v1.1.0、action/background/activeTab/icons追加
extension/content.js: 死にホスト修正＋ボタン配置改善
extension/icon{16,32,48,128}.png / generate-icons.sh: favicon.svg由来に刷新
tests/unit/extension-url.spec.ts: vitest 9件（全42件パス）
tests/e2e/extension.e2e.mjs: 実Chromium＋実GitHub＋実WorkerのE2E（モックなし）

Evidence


ボタン配置（ライト）	ボタン配置（ダーク）

GitHubページ全体	クリック後のPera1展開ビュー

詳細は .artifacts/chrome-extension/REPORT.md を参照。reviwレビューで approve 済み（「コミットpushしていいよ。」）。

🤖 Generated with Claude Code

- chrome.action クリックで現在タブのGitHub URLをPera1 URLに変換し新規タブで展開（Manifest V3 / service worker / activeTab最小権限） - 変換ロジックを pera1-url.js に分離（tree/blob/rawパス対応、Issues/PR等はリポジトリルートへフォールバック、クエリ・ハッシュ除去） - content.js のリンク先を死にホスト pera1.pages.dev から pera1.kazu-san.workers.dev に修正 - ページ内ボタンの挿入先を ul.pagehead-actions（Watch/Fork/Starの並び）に変更しタイトル下への折り返しを解消 - アイコンを favicon.svg 由来の 16/32/48/128px に刷新、generate-icons.sh も rsvg-convert 方式に更新 - vitestユニットテスト9件と実ブラウザPlaywright E2E（tests/e2e/extension.e2e.mjs）を追加 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

リモートのlockfileがpackage.jsonに追加済みのdevDependencies （vite/vitest/typescript等）を含んでいなかったためpnpm installで同期 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

github-actions · 2026-06-12T05:30:10Z

🚀 Preview deployed!

https://pera1-preview.kazu-san.workers.dev

This preview will be updated on every push to this PR.

Copilot

Pull request overview

Chrome 拡張のツールバーアイコン押下で、現在表示中の GitHub リポジトリ（/tree, /blob, /raw 等を含む）を Pera1 の 1ページ展開ビューで開けるようにし、既存のページ内ボタンも「死にホスト」から実稼働 Worker ドメインへ修正した変更です。URL 変換ロジックを共通化し、ユニットテスト／E2E テストも追加されています。

Changes:

Manifest V3 の action + service worker を追加し、ツールバーアイコン押下で現在タブ URL を Pera1 URL に変換して新規タブで開くようにした
URL 変換ロジックを extension/pera1-url.js に分離し、vitest のユニットテストを追加した
content script のリンク先ホスト修正と、ページ内ボタンの挿入位置（ul.pagehead-actions 優先）を改善した

Reviewed changes

Copilot reviewed 8 out of 17 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`extension/background.js`	ツールバーアイコンクリック時に URL 変換→タブ生成、変換不可時はバッジ表示
`extension/pera1-url.js`	GitHub URL → Pera1 URL 変換の共通ロジック（tree/blob/raw/非コードページ対応）
`extension/manifest.json`	MV3 action/background/activeTab/icons の追加
`extension/content.js`	ページ内ボタンのリンク先ホスト修正＋挿入位置の改善
`extension/generate-icons.sh`	favicon.svg から拡張アイコン生成するスクリプトへ更新
`tests/unit/extension-url.spec.ts`	URL 変換ロジックのユニットテスト追加
`tests/e2e/extension.e2e.mjs`	実 Chromium + 実 GitHub + 実 Worker の拡張 E2E テスト追加
`pnpm-lock.yaml`	開発依存関係の追加／更新に伴う lock 更新
`.artifacts/chrome-extension/REPORT.md`	実装内容・検証結果のレポート追加

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Comments suppressed due to low confidence (1)

extension/manifest.json:17

The content script only matches https://github.com/*/*, so the in-page button won't appear on https://www.github.com/... even though the URL conversion logic explicitly supports the www host. Add the www pattern to keep behavior consistent.

  "content_scripts": [
    {
      "matches": ["https://github.com/*/*"],
      "js": ["content.js"],

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

kazuph · 2026-06-12T05:54:49Z

+function loadPlaywright() {
+  for (const base of [process.cwd(), join(homedir(), "node_modules")]) {
+    try {
+      const req = createRequire(join(base, "/"));
+      return req("playwright");


検証しましたが、これは事実誤認です。Node.jsの path.join(base, "/") は base を破棄せず末尾セパレータ付きの "<base>/" を返します（例: join("/Users/x/node_modules", "/") → "/Users/x/node_modules/"）。末尾セパレータ付きディレクトリは createRequire の正規の基点であり、実機で playwright の解決とE2E実行が複数回成功することを確認済みです。誤解防止のためコメントを追記しました（51c0ce8）。

kazuph · 2026-06-12T05:54:51Z

+  return chrome.tabs.create({
+    url: pera1Url,
+    index: tab.index + 1,
+    openerTabId: tab.id,
+  });


ご指摘の通りです。51c0ce8 で index / openerTabId を型ガードしました（typeof === "number" && >= 0 のときのみ指定、それ以外は undefined）。E2Eで実ブラウザ動作も再確認済みです。

kazuph · 2026-06-12T05:54:52Z

+chrome.action.onClicked.addListener((tab) => {
+  openInPera1(tab);
+});


ご指摘の通りです。51c0ce8 で onClicked リスナーに .catch() を追加し、失敗時は console.error でログ出力するようにしました。

kazuph · 2026-06-12T05:54:56Z

+  '@cloudflare/vite-plugin@1.40.0':
+    resolution: {integrity: sha512-v77QQ2AdyBB+XW6uzKpWanbQy7ckYqSXFwJgQN871XITqLdJTdYOAWxt/jLPw9tNnHkKS6HTwV9+9bfQcLWz/w==}
+    hasBin: true
+    peerDependencies:
+      vite: ^6.1.0 || ^7.0.0 || ^8.0.0
+      wrangler: ^4.98.0
+


ご指摘の通りです。51c0ce8 で wrangler を ^4.98.0 に更新し、@cloudflare/vite-plugin@1.40.0 の peerDependencies（wrangler ^4.98.0）と整合させました。pnpm build / vitest 42件 / E2E すべてグリーンを確認済みです。

- background.js: chrome.tabs.create の index/openerTabId を型ガード（部分的なtabオブジェクトでもNaN/不正IDにならない） - background.js: onClicked リスナーで openInPera1 の rejection を捕捉しログ出力（unhandled rejection防止） - wrangler を ^4.98.0 に更新し @cloudflare/vite-plugin@1.40.0 の peerDependencies と整合（build/test/E2E全グリーン確認済み） - e2e: createRequire(join(base, "/")) が正規の用法である旨のコメントを追記（joinはbaseを保持する） - E2E再実行でスクショ証跡を撮り直し Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

kazuph and others added 3 commits June 12, 2026 14:28

chore: sync pnpm-lock.yaml with package.json devDependencies

83f3d13

リモートのlockfileがpackage.jsonに追加済みのdevDependencies （vite/vitest/typescript等）を含んでいなかったためpnpm installで同期 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs: add evidence report for chrome-extension feature

4c23f5f

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings June 12, 2026 05:29

Copilot started reviewing on behalf of kazuph June 12, 2026 05:29 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

kazuph merged commit 5dc06df into main Jun 12, 2026
2 checks passed

kazuph deleted the feature/chrome-extension branch June 12, 2026 06:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(extension): ツールバーアイコンクリックで現在のGitHubリポジトリをPera1展開#3

feat(extension): ツールバーアイコンクリックで現在のGitHubリポジトリをPera1展開#3
kazuph merged 4 commits into
mainfrom
feature/chrome-extension

kazuph commented Jun 12, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

kazuph Jun 12, 2026

Uh oh!

kazuph Jun 12, 2026

Uh oh!

kazuph Jun 12, 2026

Uh oh!

kazuph Jun 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kazuph commented Jun 12, 2026

WHY

HOW

WHAT

Evidence

Uh oh!

github-actions Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

kazuph Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

kazuph Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

kazuph Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

kazuph Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jun 12, 2026 •

edited

Loading